<template>
  <div class="index">
    <!-- <mt-header style="background-color: #ff4d4f;color:#fff" fixed title="奖品"></mt-header> -->
    <div class="main">
      <div class="jpHeader">
        <p>
          我的积分:
          <span v-if="Identity==0">{{infoData.Balance}}</span>
          <span v-else>0</span>
          <mt-button type="danger" size="small" v-if="Identity==0" @click.native="list_detal">兑换记录</mt-button>
        </p>
      </div>
      <ul>
        <li class="liHeader">
          <p>
            <span class="left">奖品名称</span>
            <span class="con">所需积分</span>
            <span class="con"></span>
          </p>
        </li>
        <li class="li" v-for="item in list" :key="item.id">
          <p>
            <span class="left">{{item.Name}}</span>
            <span class="con">{{item.Score}}</span>
            <span class="con">
              <mt-button type="danger" plain size="small" @click.native="dhBtn(item)">兑换</mt-button>
            </span>
          </p>
        </li>
      </ul>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "../../utils/tabbar_jp";
import https from "../../utils/http.js";
import { Swiper, Slide } from "vue-swiper-component";
export default {
  name: "index",
  data() {
    return {
      infoData: {},
      list: [],
      Identity: 0
    };
  },
  methods: {
    get_info() {
      https({
        method: "get",
        url: "/api/v1/Systems/GetDetail",
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.infoData = res.Data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    get_list() {
      https({
        method: "get",
        url: "/api/v1/Prizes/PrizeGetList",
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.list = res.Data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    list_detal() {
      this.$router.push({ path: "/jpListDetail" });
    },
    dhBtn(row) {
      console.log(row);
      if (this.infoData.Balance < row.Score) {
        Toast({
          message: "您的积分不足！"
        });
      } else {
        MessageBox.confirm("确定使用" + row.Score + "积分兑换" + row.Name + "?")
          .then(action => {
            https({
              method: "get",
              url: "/api/v1/Prizes/Exchange/" + row.PrizeID,
              data: {}
            })
              .then(res => {
                console.log(res);
                if (res.Code == 200) {
                  Toast({
                    message: res.Describe,
                    iconClass: "icon icon-success"
                  });
                  this.get_list();
                } else {
                  Toast({
                    message: res.Describe
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(err => {});
      }
    }
  },
  mounted: function() {
    this.get_list();
    if (this.Identity == 0) {
      this.get_info();
    }
  },
  created() {
    if (localStorage.getItem("Identity")) {
      this.Identity = localStorage.getItem("Identity");
    }
    console.log(this.Identity);
  },
  components: { tabbar, Swiper, Slide }
};
</script>

<style lang="less" scoped>
.main::-webkit-scrollbar {
  display: none;
}
.jpHeader {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  position: fixed;

  p {
    font-size: 1.2rem;
    span {
      color: #ff4d4f;
    }

    .mint-button--small {
      float: right;
      margin-top: 0.5rem;
    }
  }
}
.main {
  width: 100%;
  // padding-top: 2.5rem;
  margin-bottom: 4rem;
  overflow: scroll;
  ul {
    width: 100%;
    margin: 4rem auto;
    margin-bottom: 0;
    padding: 0;
    .li {
      list-style: none;
      width: 100%;
      height: 3rem;
      background: #fff;
      margin-top: 1px;
      p {
        font-size: 1rem;
        padding: 0 1rem;
        box-sizing: border-box;
        line-height: 3rem;
        .left {
          display: block;
          float: left;
          width: 60%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
        }
        .con {
          display: inline-block;
          width: 20%;
          text-align: center;
        }
      }
    }
    .liHeader {
      list-style: none;
      width: 100%;
      height: 3rem;
      background: #fff;
      margin-top: 1px;
      p {
        font-size: 1rem;
        padding: 0 1rem;
        box-sizing: border-box;
        line-height: 3rem;
        .left {
          display: inline-block;
          width: 60%;
          text-align: center;
        }
        .con {
          display: inline-block;
          width: 20%;
          text-align: center;
        }
      }
    }
  }
}
</style>